<template>
  <!-- <div id="under_1_1" style="width:100%;height:300px"></div> -->
  <div id="under1">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div id="under_1_1" style="width:454px;height:280px"></div>
      </swiper-slide>
      <swiper-slide>
      <div id="under_1_2" style="width:454px;height:280px"></div>
      </swiper-slide>
    </swiper>
  </div>
 
</template>
<script>
import echarts from "echarts";
import { followershuman,followersrobot,followinghuman,followingrobot } from "@/api/api.js";
export default {
  data() {
    return {
      swiperOptions:{
         autoplay:true, 
      },
      content: null,
      content1: null,
      content2: null, 
      content3: null
    };
  },
  mounted() {
    this.followershumanFn();
    this.followersrobotFn();
    this.followinghumanFn();
    this.followingrobotFn();
  },
  methods: {
    async followershumanFn() {
      var params = {
        id: 1
      };
      var data = await followershuman(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async followersrobotFn() {
      var params = {
        id: 1
      };
      var data = await followersrobot(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content1 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async followinghumanFn() {
      var params = {
        id: 1
      };
      var data = await followinghuman(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content2 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async followingrobotFn() {
      var params = {
        id: 1
      };
      var data = await followingrobot(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content3 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    renderFn() {
      var myChart1 = echarts.init(document.getElementById("under_1_1"));
      var option1 = {
        backgroundColor: "#000",
        tooltip: {
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "12%",
          top: "12%",
          containLabel: true
        },
        legend: {
          data: ["人类", "机器人"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: ["100及以下", "100至500", "500至1000", "1000至5000", "5000至1万","1万及以上"],
          axisLine: {
            lineStyle: {
              color: "#425873"
            }
          },
          axisLabel: {
            margin: 15,
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#BBC4CD",
              fontSize: 8
            }
          },
          axisTick: {
            show: false
          }
        },

        yAxis: {
          type: "value",
          data: [0.00, 10.00, 20.00, 30.00, 40.00,50.00, 60.00, 70.00, 80.00,90.00],
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine:{
             show:true,
              lineStyle:{
             type:'dashed'
             }
          },
          axisLabel: {
            textStyle: {
              color: "#BBC4CD",
              fontSize: 13
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "人类",
            type: "bar",
            barWidth: "20",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ])
              }
            },
            data: this.content2.list
          },
          {
            name: "机器人",
            type: "bar",
            barWidth: "20",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ])
              }
            },
            data: this.content3.list
          }
        ]
      };
      myChart1.setOption(option1);
      var myChart2 = echarts.init(document.getElementById("under_1_2"));
      var option2 = {
        backgroundColor: "#000",
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["人类", "机器人"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
         grid: {
          left: "5%",
          right: "8%",
          bottom: "12%",
          top: "12%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [100, 200, 20, 30, 60, 89],
          axisLine: {
            lineStyle: {
              color: "#FFF"
            }
          }
        },
        yAxis: {
          type: "value",

          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#FFF"
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#FFF"
            }
          },
          nameTextStyle: {
            color: "#FFF"
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: "人类",
            type: "line",
            data: this.content.list,
            color: "#FFF",
            lineStyle: {
              normal: {
                width: 5,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ]),
                
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ])
              }
            },
            smooth: true
          },
          {
            name: "机器人",
            type: "line",
            data: this.content1.list,
            lineStyle: {
              normal: {
                width: 5,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ]),
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ])
              }
            },
            smooth: true
          }
        ]
      };
      myChart2.setOption(option2);
    }
  }
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 506px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #2e374400;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #f4f9ff18;
}
.el-carousel__container{
  height: 100%;
}
</style>
<style>
.under1 .el-carousel {
  height: 100%;
}
.under1 .el-carousel__container {
  height: calc(100% - 50px);
}
</style>